<template>
	<view class="edit-view">
		<input v-model="parms.firstName" type="text" :placeholder="$t('editAddr.firstNmae')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
		<input v-model="parms.lastName" type="text" :placeholder="$t('editAddr.lastName')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
		<input v-model="parms.detailsAddress" type="text" :placeholder="$t('editAddr.detail')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
		<input v-model="parms.streetAddress" type="text" :placeholder="$t('editAddr.street')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
		<input v-model="parms.city" type="text" :placeholder="$t('editAddr.city')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
		<view class="country-code">
			<view class="country" @tap="show = true">
				{{regionName}}
			</view>
			<input v-model="parms.zipCode" type="text" :placeholder="$t('editAddr.code')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
		</view>
		<input v-model="parms.phoneNumber" type="text" :placeholder="$t('editAddr.mobile')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx">
		
		<textarea v-model="parms.deliveryInstrucrions" class="detail-text" name="" id="" cols="30" rows="10" :placeholder="$t('editAddr.area')" placeholder-style="color:#858585;font-family: PingFang SC;font-size: 24rpx"></textarea>
		
		<view class="is-default">
			<image @tap="parms.ifDefault='1'" v-if="parms.ifDefault=='0'" src="../../static/icon/image_90.png" mode=""></image>
			<image @tap="parms.ifDefault='0'" v-else src="../../static/icon/image_32.png" mode=""></image>
			<view class="desc">
				{{$t('editAddr.hint')}}
			</view>
		</view>

		<view class="btn" @tap="addAddr">
			{{$t("editAddr.save")}}
		</view> 
		
		<u-picker :show="show" ref="uPicker" :columns="regionList"
			@confirm="confirmRegions" @cancel="show = false" @close="show = false"
			closeOnClickOverlay></u-picker>
	</view>
</template>

<script>
	import { addUserAddr, getRegions, updateUserAddr } from "@/common/api.js"
	
	export default {
		data() {
			return {
				def: false,
				parms: {
					firstName: "",
					lastName: "",
					detailsAddress: "",
					streetAddress: "",
					city: "",
					country: "",
					zipCode: "",
					phoneNumber: "",
					deliveryInstrucrions: "",
					ifDefault: "0",
					flag: 1,
					isAdd: true
				},
				regionList: [[]],
				regionIdList: [],
				regionName: this.$t('editAddr.country'),
				show: false
			}
		},
		methods: {
			async addAddr() {
				console.log(this.parms);
				for (let key in this.parms) {
					if(this.parms[key] == "") {
						uni.showToast({
							icon: 'none',
							title: this.$t("editAddr.hint2"),
							duration: 980,
							mask: true
						})
						
						return
					}
				}
				
				this.parms.phoneNumber = String(this.parms.phoneNumber)
				
				if(this.isAdd) {
					const res = await addUserAddr(this.parms);
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: this.$t("editAddr.hint3"),
							duration: 1500,
							mask: true
						})
						
						uni.navigateBack()
					}
				} else {
					const res = await updateUserAddr(this.parms);
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: this.$t("editAddr.hint3"),
							duration: 1500,
							mask: true
						})
						
						uni.navigateBack()
					}
				}
			},
			confirmRegions(e) {
				this.regionName = e.value[0]
				this.show = false;
				this.regionId = this.regionIdList[e.indexs[0]];
				this.parms.country = this.regionName;
			},
			async initRegions() {
				const res = await getRegions();
				console.log(res);
				res.data.forEach(item => {
					// if (this.$t("language") == "zh") {
					// 	this.regionList[0].push(item.brandName);
					// } else {
					// 	this.regionList[0].push(item.brandEngName);
					// }
					this.regionList[0].push(item.brandEngName);
					this.regionIdList.push(item.id);
				});
				console.log(this.regionList, this.regionIdList);
			},
		},
		onLoad(option) {
			if (option.item) {
				uni.setNavigationBarTitle({ title: this.$t("editAddr.title2")});
				this.parms = {...JSON.parse(decodeURIComponent(option.item))}
				this.regionName = this.parms.country;
				this.isAdd = false;
			} else {
				uni.setNavigationBarTitle({ title: this.$t("editAddr.title")});
				this.isAdd = true;
			}
			this.initRegions();
		},
		onReady() {
			// uni.setNavigationBarTitle({ title: this.$t("editAddr.title")});
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.edit-view {
		box-sizing: border-box;
		padding: 0 50rpx;
	}
	
	input {
		background: #FFFFFF;
		border: 2repx solid rgba(128, 128, 128, 0.1);
		border-radius: 10rpx;
		height: 80rpx;
		padding-left: 20rpx;
		margin-top: 40rpx;
	}
	
	.country {
		background: #FFFFFF;
		border: 2repx solid rgba(128, 128, 128, 0.1);
		border-radius: 10rpx;
		height: 80rpx;
		padding-left: 20rpx;
		margin-top: 40rpx;
		color:#858585;
		font-family: PingFang SC;
		font-size: 24rpx;
		line-height: 80rpx;
		width: 30%;
	}
	
	.country-code {
		display: flex;
		justify-content: space-between;
		
		.first-ipt {
			margin-right: 20rpx;
		}
	}
	
	.detail-text {
		margin: 0;
		height: 266rpx;
		// margin-top: 40rpx;
		margin: 40rpx 16rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border: 2repx solid rgba(128, 128, 128, 0.1);
		border-radius: 10rpx;
	}
	
	.is-default {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
		
		.desc {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 700;
			font-size: 12px;
			color: #858585;
		}
	}
	
	.btn {
		border-radius: 20rpx;
		background: #000000;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
		height: 88rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		line-height: 88rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}
</style>